import { FormRule, PrimaryTableCol, Space, TableRowData } from 'tdesign-vue-next';

import { ActionBarItem } from '@/components/common-action-bar/index.vue';
import { t } from '@/locales';
import { tableActionBtn, tableSwitch } from '@/utils/action';

export interface FormItem {
  id?: number;
  name: string;
  letter: string;
  pinyin: string;
  seoTitle: string;
  seoKeywords: string;
  seoDescription: string;
}

export const ACTION_BAR_DATA: ActionBarItem[] = [
  { text: 'common.add', theme: 'primary', auth: ['content:tag:create'], key: 'addShow' },
];

export const COLUMNS: PrimaryTableCol<TableRowData>[] = [
  { title: 'ID', colKey: 'id', width: 100 },
  { title: () => t('pages.tag.name'), colKey: 'name' },
  { title: () => t('pages.tag.datas'), colKey: 'count' },
  { title: () => t('common.seoTitle'), colKey: 'seoTitle' },
  { title: () => t('common.seoKeyword'), colKey: 'seoKeywords' },
  { title: () => t('common.seoDescription'), colKey: 'seoDescription' },
  {
    title: () => t('common.display'),
    colKey: 'display',
    width: 150,
    cell(h, { row }) {
      const ele = tableSwitch(h, row, ['content:tag:display']);
      return row.display !== undefined ? ele : '';
    },
  },
  {
    title: () => t('common.operation'),
    colKey: 'action',
    width: 150,
    cell(h, { row }) {
      const actionEdit = tableActionBtn({ h, type: 'edit', row, auths: ['content:tag:detail'] });
      const actionDelete = tableActionBtn({ h, type: 'delete', row, auths: ['content:tag:delete'] });
      return h(Space, () => {
        return [actionEdit, actionDelete];
      });
    },
  },
];

export const FORM_DATA: FormItem = {
  id: 0,
  name: '',
  letter: '',
  pinyin: '',
  seoTitle: '',
  seoKeywords: '',
  seoDescription: '',
};

export const FORM_RULES: Record<string, FormRule[]> = {
  name: [{ required: true, trigger: 'change' }],
};
